<template>
  <div>
    <div class="con1" v-for="(item,index) in arr" :key="index">
      <div class="con2"  @click="shop1()">
        <div class="tu"><img src="../../../public/lzc/s2.png" alt="" /></div>
        <div class="tu-right">
          <h3>思妍丽（中大国际店）</h3>
          <van-rate
            v-model="value"
            allow-half
            void-icon="star"
            void-color="#eee"
          />
          <span class="pf">&nbsp;4.5&nbsp;</span>
          <span class="yx">优选门店</span>
          <div>
            <p>"各个方面都很满意"</p>
            <span>手艺精湛</span>
          </div>
          <p>
            <span class="dd">到店</span>&nbsp;
            <span class="jr">今日可约</span>
          </p>
        </div>
      </div>
      <div class="con3">
        <ul>
          <li v-for="(v, i) in arr" :key="i" @click="de()">
            <p class="p1"><img :src="v.pic" alt="" /></p>
            <p class="p2">
              <b>{{ v.gname | titlesub }}</b>
            </p>
            <p class="p3">
              <span class="j1">￥</span>
              <span class="j2">{{ v.price1 }}</span>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Rate } from "vant";
Vue.use(Rate);
import { getlink } from "../../api/getapi.js";

export default {
  filters: {
    titlesub(val) {
      if (val.length > 8) {
        return val.substr(0, 8) + "...";
      } else {
        return val;
      }
    },
  },
  data() {
    return {
      arr: [],
      value: 2.5,
    };
  },
  methods:{
    shop1(){
             this.$router.push("/sh")
          },
          de(){
             this.$router.push("/de")
          },
          
    },
  mounted() {
    getlink("/api/findGoodsByFlag1").then((ok) => {
      console.log("ok.data", ok.data);
      this.arr = ok.data;
    });
  },
};
</script>

<style scoped>
.con1 {
  height: 6.16rem;
  background-color: white;
}
.con2 {
  display: flex;
  /* margin-top: 0.26rem; */
}
.con2 .tu {
  margin-top: 0.26rem;
  width: 1rem;
  height: 1rem;
}
.con2 .tu img {
  margin-left: 0.2rem;           
}
.con2 .tu-right {
  margin-top: 0.26rem;
  margin-left: 1.5rem;
}
.con2 .tu-right {
  font-size: 0.26rem;
}
.con2 .tu-right h3 {
  margin-top: 0.2rem;      
  color: grey;
}
.con2 .tu-right .yx {
  background-color: rgb(250, 191, 168);
}
.con2 .tu-right .dd {
  color: rgb(69, 179, 255);
  margin: 0.2rem 0;
  border: 1px solid rgb(69, 179, 255);
}
.con2 .tu-right .jr {
  color: rgb(255, 127, 126);
  border: 1px solid rgb(255, 127, 126);
}
.con3 ul {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  margin-left: 0.2rem;
}
.con3 ul li {
  width: 2.34rem;
  height: 3.4rem;
  /* border: 1px solid rgb(255,127,126); */
  margin-right: 0.1rem;
}
.con3 .p1 {
  width: 2.34rem;
  height: 2.34rem;
  margin-top: 0.2rem;
}
.con3 .p1 img {
  width: 100%;
  height: 100%;
}
.con2 .p2 {
  margin-top: 0.2rem;
}

.con3 .p2 b {
  font-size: 0.24rem;
}
.con3 .j1 {
  color: red;
}
.con3 .j2 {
  color: red;
  font-size: 0.5rem;
}
</style>